<template>
	<view class="">
		<view class="top-card">
			<view class="wite"></view>
		</view>
		<view class="sys-head" :style="{ height: sysHeight()+'px' }"></view>
		<view class="content-card">
			<view class="user-card flex">
				<view class="userinfo">
					<image :src="Userinfo.avatar?Userinfo.avatar:'/static/logo.png'" mode=""></image>
					<view class="user-name">
						<view class="name">{{Userinfo.nickName?Userinfo.nickName:'无名'}}</view>
						<view class="name-text" @click="navigto('/pagesA/usercenetr/usercenetr?id='+Userinfo.id)">
							<text>个人主页</text>
							<u-icon name="arrow-right" color="#140636" size="12" bold></u-icon>
						</view>
					</view>
				</view>
				<view class="day-p" v-if="bymood">
					<image :src="'/static/icons/'+bymood.type+'.png'" mode=""></image>
					<view class="day-button">今日心情</view>
				</view>
			</view>
			<view class="button-card">
				<image src="/static/my/button1.png" mode="" @click="navigto('/pagesA/moodlogs/moodlogs')"></image>
				<image src="/static/my/button2.png" mode="" @click="navigto('/pagesA/mypost/mypost')"></image>
			</view>
			<view class="list-card">
				<view class="item-card" v-for="item in List" @click="changelist(item)">
					<view class="item-left">
						<image :src="item.icon" mode=""></image>
						<view class="text">{{item.name}}</view>
					</view>
					<view class="item-right">
						<u-icon name="arrow-right" color="#140636" size="12" bold></u-icon>
					</view>

				</view>
			</view>
		</view>
		<!-- 在线客服 -->
		<Customer :customershow="customershow" @close="customershow = false" :ponecontent="ponecontent"></Customer>
		<!-- 退出 -->
		<ConfirmPop :logoutshow="logoutshow" @close="logoutshow=false" @confrom="confrom" content="确认退出吗？"></ConfirmPop>
	</view>
</template>

<script>
	import Customer from "@/components/Customer.vue"
	import ConfirmPop from "@/components/ConfirmPop.vue"

	import {
		getByDayMood
	} from "@/api/index.js"
	import {
		systemConfig
	} from "@/api/my.js"
	export default {
		components: {
			Customer,
			ConfirmPop
		},
		data() {
			return {
				List: [{
						name: '编辑资料',
						icon: '/static/my/3.png',
						url: '/pagesA/editprofile/editprofile'
					},
					{
						name: '意见反馈',
						icon: '/static/my/5.png',
						url: '/pagesA/Feedback/Feedback'
					},
					{
						name: '隐私协议',
						icon: '/static/my/2.png',
						url: '/pagesA/agreement/agreement'
					},
					// {
					// 	name: '一键分享',
					// 	icon: '/static/my/4.png',
					// 	url: ''
					// },
					{
						name: '在线客服',
						icon: '/static/my/1.png',
						url: 'customer'
					},
					{
						name: '退出登录',
						icon: '/static/my/6.png',
						url: 'logut'
					}
				],
				ponecontent:'17690927591',
				customershow: false,
				bymood: '',
				logoutshow: false
			}
		},
		onLoad() {
			this.getday();
		},
		computed: {
			Userinfo() {
				return this.$store.state.userinfo;
			},
		},
		methods: {
			navigto(url) {
				uni.navigateTo({
					url: url
				})
			},
			changelist(item) {
				if (item.url) {
					if (item.url == 'customer') {
						//获取商家联系方式
						this.getpone();
					} else if (item.url == 'logut') {
						this.logoutshow = true;

					} else {
						this.navigto(item.url);
					}
				}
			},
			//获取当天心情
			getday() {
				getByDayMood({
					userId: this.$store.state.userid
				}).then(res => {
					if (res.data) {
						this.bymood = res.data;
					}
				})
			},
			getpone() {
				systemConfig({
					key: 'platform_tel'
				}).then(res => {
					this.ponecontent = res.data;
					this.customershow = true;
				})

			},
			//退出确认
			confrom() {
				uni.clearStorageSync();
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	view {
		box-sizing: border-box;
		color: #000000;
		font-size: 28rpx;
		font-weight: 500;
	}

	.top-card {
		background:
			linear-gradient(270deg, rgba(254, 235, 255, 1) 0%, rgba(217, 201, 255, 1) 100%);
		width: 100%;
		height: 470rpx;
		position: absolute;
		top: 0%;
		left: 0%;
		filter: blur(9px);
		background-color: #fff;

		.wite {
			width: 100%;
			height: 30%;
			position: absolute;
			bottom: 0%;
			left: 0%;
			z-index: 1;
			filter: blur(9px);
			background:
				linear-gradient(270deg, rgba(255, 266, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
		}
	}

	.content-card {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 3;
		padding: 30rpx;


		.title {
			color: #140636;
			font-size: 18px;
			font-weight: bold;
		}

		.user-card {
			width: 100%;
			justify-content: space-between;
			margin-top: 60rpx;

			.userinfo {
				display: flex;
				align-items: center;

				image {
					width: 108rpx;
					height: 108rpx;
					border-radius: 100%;
				}

				.user-name {
					padding: 0rpx 20rpx;

					.name {
						color: #140636;
						font-size: 36rpx;
						font-weight: 700;
					}

					.name-text {
						display: flex;
						align-items: center;
						margin-top: 10rpx;
						color: #140636;
						font-size: 28rpx;
						font-weight: 500;

						text {
							padding-right: 20rpx;
						}
					}

				}


			}

			.day-p {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 96rpx;
					height: 96rpx;
				}

				.day-button {
					border-radius: 28rpx;
					opacity: 1;
					background: #ffffff;
					font-size: 24rpx;
					padding: 5rpx 20rpx;
					color: #AB73FF;
				}
			}
		}

		.button-card {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 120rpx;

			image {
				width: 336rpx;
				height: 132rpx;
			}
		}

		.list-card {
			width: 100%;
			margin-top: 60rpx;

			.item-card {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 16rpx;
				background: #f9f9f9;
				padding: 25rpx 20rpx;
				margin-bottom: 20rpx;

				.item-left {
					display: flex;
					align-items: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					.text {
						font-size: 14px;
						font-weight: 500;
						color: rgba(20, 6, 54, 1);
						padding-left: 10rpx;
					}
				}

				.item-right {}
			}
		}


	}
</style>